<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>样式</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }

        .happy {
            border: 1px thin red;
            background-color: chocolate;
        }

        .sad {
            border: 1px thick green;
            background-color: darkgray;
        }

        .normal {
            border: 1px transparent gray;
            background-color: lightgray;
        }

        .peiliyou1 {
            border: 3px thick lightblue;
        }

        .peiliyou2 {
            font-size: 28px;
        }

        .peiliyou3 {
            border-radius: 15%;
        }
    </style>
</head>
<div id="root">
    <!--class样式类名不确定 需要动态指定-->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
    <hr />
    <!--class样式类名个数不确定 名字也不确定-->
    <div class="basic" :class="classArr" @click="changeMood">{{name}}</div>
    <hr />
    <!--class样式类名个数确定 名字确定 动态决定用不用-->
    <div class="basic" :class="classObj" @click="changeMood">{{name}}</div>
    <hr />
    <!--style样式-->
    <div class="basic" :style="{fontSize: fsize + 'px'}" @click="changeMood">{{name}}</div>
    <div class="basic" :style="styleObject" @click="changeMood">{{name}}</div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: '#root',
        data: {
            name: '培立优',
            mood: 'normal',
            classArr: ['peiliyou1', 'peiliyou2', 'peiliyou3'],
            classObj: {
                happy: true,
                peiliyou1: false,
                peiliyou2: true,
                peiliyou3: false
            },
            fsize: 40,
            styleObject: {
                fontSize: '40px'
            }
        },
        computed: {
        },
        methods: {
            changeMood(event) {
                const arr = ['happy', 'sad', 'normal'];
                this.mood = arr[Math.floor(Math.random() * 3)];
                this.classArr.pop();
                this.classObj.peiliyou1 = true;
                this.fsize = 50;
                this.styleObject.fontSize = (Math.floor(Math.random() * 3) * 10) + 'px'
            },
        }
    });
</script>

</html>